<template>
  <div id="amap-container">
    <div class="amapClass" id="custom-amap" />
  </div>
</template>

<script>
  const AMap = window.AMap;
  export default {
    name: 'AMap',
    props: {
      selectLon: {
        type: String,
        default: ''
      },
      selectLat: {
        type: String,
        default: ''
      },
      fence:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        defaultCity: '厦门',
        // 地图对象
        map: null,
        // 定位默认地址 | 搜索后选择的地址
        formattedAddress: null,
        // 地图标记
        marker: '',
        // 地址解析（正向）
        geocoder: '',
        lonlat:'',
        lon:'',
        lat:'',
        center:[118.08891,24.479627],
      };
    },
    watch: {
      selectLon(){
        this.setCurrMaker(this.selectLat,this.selectLon);
      },
      //检测围栏内容
      fence(){
        this.setFence(this.fence);
      }
    },
    mounted() {
      // 初始化地图页面
      this.initMap();
      // this.geolocation();
    },
    beforeDestroy() {
      // 销毁地图
      this.map.destroy();
    },
    methods: {
      //   初始化地图页面
      initMap() {
        this.map = new AMap.Map('custom-amap', {
          resizeEnable: true,
          zoom: 15,
          // mapStyle:"amap://styles/blue"
        });
        // 添加工具栏
        this.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye'], () => {
          // 工具条
          const toolbar = new AMap.ToolBar();
          // 比例尺
          const scale = new AMap.Scale();
          // 显示鹰眼
          // const hawkEye = new AMap.HawkEye({isOpen:true});
          this.map.addControl(toolbar);
          this.map.addControl(scale);
          // this.map.addControl(hawkEye);
        });
        this.marker = new AMap.Marker();
        // 添加鼠标点选地图选择地址
        this.addAmapGeocoder();
        if(null != this.lat && undefined != this.lat && '' != this.lat){
          this.setCurrMaker(this.lat,this.lon);
        }
      },
      geolocation(){
        AMap.plugin('AMap.Geolocation', function() {
           var geolocation = new AMap.Geolocation({
           // 是否使用高精度定位，默认：true
           enableHighAccuracy: true,
           // 设置定位超时时间，默认：无穷大
           timeout: 10000,
           // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
           buttonOffset: new AMap.Pixel(10, 20),
           //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
           zoomToAccuracy: true,
           panToLocation: true,
           //  定位按钮的排放位置,  RB表示右下
               buttonPosition: 'RB'
           })

           geolocation.getCurrentPosition(function(status,result){
             if(status=='complete'){
                 onComplete(result)
             }else{
                 onError(result)
             }
           });

           function onComplete(data) {
               // data是具体的定位信息
               console.log(data)
               if (data.formattedAddress) {
                   console.log(data.formattedAddress)
               } else {
                 console.log('获取定位失败')
               }
           }
           function onError(data) {
               // 定位出错
               console.info(data);
               console.log('获取定位失败')
          }
        })
      },
      // 添加maker
      setMaker() {
        // 添加解析地理位置插件
        this.map.plugin('AMap.Geocoder', () => {
          // 异步加载插件
          this.geocoder = new AMap.Geocoder({
            city: this.defaultCity, // 默认：“全国”
            radius: 1000 // 范围，默认：500
          });
        });
      },
      setCurrMaker(lat,lon){
        if(null != lat && undefined != lat && '' != lat && undefined != lon && null != lon && '' != lon){
          // 添加maker
          this.setMaker();
          this.map.add(this.marker);
          const lnglat = [lon, lat];
          this.marker.setPosition(lnglat);
          this.map.setCenter(lnglat);
          this.map.setZoom(15);
        }else{
          this.map.setCenter(this.center);
          this.map.setZoom(15);
        }
      },
      // 添加鼠标点选地图选择地址
      addAmapGeocoder() {
        // 添加maker
        this.setMaker();
        // 地图添加点击事件
        this.map.on('click', e => {
          this.map.add(this.marker);
          const lnglat = [e.lnglat.lng, e.lnglat.lat];
          this.marker.setPosition(lnglat);
          this.geocoder.getAddress(lnglat, (status, result) => {
            if (status === 'complete' && result.regeocode) {
              const res = result.regeocode;
              const data = {
                // 地址名称
                address: res.formattedAddress,
                // 纬度lat
                lat: lnglat[1].toString(),
                // 经度lng
                lng: lnglat[0].toString()
              };
              this.$emit("clickCallback",data);
            } else {
              alert(JSON.stringify(result));
            }
          });
        });
      },
      //填充围栏对象
      setFence(val){
        //清空当前围栏
        var polyArr = this.map.getAllOverlays("polygon");
        this.map.remove(polyArr);
        //填充新的围栏
        if('' != val && null != val && undefined != val){
          var polygon = new AMap.Polygon({
            path: eval(val)
          });
          this.map.add(polygon);
          this.map.setFitView();
        }
      },
    }
  };
</script>

<style lang="scss">
  #amap-container {
    #custom-amap {
      height: 60vh;
      width: 100%;
      border: 1px solid #ccc;
    }
  }
  // .amapClass{
  //   margin-left:10px;
  // }
</style>
